<template>
  <div class="diary-write-view">
    <!-- 页面头部 -->
    <div class="page-header">
      <div class="header-content">
        <div class="header-left">
          <button class="back-btn" @click="handleBack">
            <svg fill="none" viewBox="0 0 24 24">
              <path d="M19 12H5M12 19l-7-7 7-7" stroke="currentColor" stroke-width="2"/>
            </svg>
            返回
          </button>
          <div class="header-text">
            <h1 class="page-title">
              {{ isEditing ? '编辑日记' : '写日记' }}
            </h1>
            <p class="page-subtitle">记录生活的美好时光</p>
          </div>
        </div>

        <div class="header-actions">
          <div :class="{ active: isAutoSaving }" class="auto-save-status">
            <svg class="save-icon" fill="none" viewBox="0 0 24 24">
              <path d="M19 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h11l5 5v11a2 2 0 0 1-2 2z" stroke="currentColor" stroke-width="2"/>
              <polyline points="17,21 17,13 7,13 7,21" stroke="currentColor" stroke-width="2"/>
              <polyline points="7,3 7,8 15,8" stroke="currentColor" stroke-width="2"/>
            </svg>
            <span class="save-text">{{ saveStatusText }}</span>
          </div>

          <button
            :disabled="isSaving"
            class="action-btn draft"
            @click="saveDraft"
          >
            <svg fill="none" viewBox="0 0 24 24">
              <path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z" stroke="currentColor" stroke-width="2"/>
              <polyline points="14,2 14,8 20,8" stroke="currentColor" stroke-width="2"/>
            </svg>
            保存草稿
          </button>

          <button
            :disabled="isSaving || !isFormValid"
            class="action-btn publish"
            @click="publishDiary"
          >
            <svg v-if="isSaving" class="loading-spinner" fill="none" viewBox="0 0 24 24">
              <circle cx="12" cy="12" r="10" stroke="currentColor" stroke-width="2"/>
              <path d="M12 6v6l4 2" stroke="currentColor" stroke-width="2"/>
            </svg>
            <svg v-else fill="none" viewBox="0 0 24 24">
              <path d="M12 19l7-7 3 3-7 7-3-3z" stroke="currentColor" stroke-width="2"/>
              <path d="M18 13l-1.5-7.5L2 2l3.5 14.5L13 18l5-5z" stroke="currentColor" stroke-width="2"/>
              <path d="M2 2l7.586 7.586" stroke="currentColor" stroke-width="2"/>
              <circle cx="11" cy="11" r="2" stroke="currentColor" stroke-width="2"/>
            </svg>
            {{ isSaving ? '发布中...' : '发布' }}
          </button>
        </div>
      </div>
    </div>

    <!-- 写作区域 -->
    <div class="writing-section">
      <div class="writing-container">
        <!-- 日记标题 -->
        <div class="title-section">
          <input
            v-model="diaryForm.title"
            class="title-input"
            maxlength="100"
            placeholder="给你的日记起个标题..."
            type="text"
            @input="handleTitleChange"
          />
          <div class="title-counter">{{ diaryForm.title.length }}/100</div>
        </div>

        <!-- 元信息 -->
        <div class="meta-section">
          <div class="meta-item">
            <label class="meta-label">日期</label>
            <input
              v-model="diaryForm.date"
              class="meta-input"
              type="date"
              @change="handleDateChange"
            />
          </div>

          <div class="meta-item">
            <label class="meta-label">心情</label>
            <select v-model="diaryForm.mood" class="meta-select">
              <option value="">选择心情</option>
              <option value="happy">😊 开心</option>
              <option value="excited">😆 兴奋</option>
              <option value="calm">😌 平静</option>
              <option value="thoughtful">🤔 沉思</option>
              <option value="sad">😢 难过</option>
              <option value="tired">😴 疲惫</option>
              <option value="angry">😠 生气</option>
            </select>
          </div>

          <div class="meta-item">
            <label class="meta-label">天气</label>
            <select v-model="diaryForm.weather" class="meta-select">
              <option value="">选择天气</option>
              <option value="sunny">☀️ 晴天</option>
              <option value="cloudy">☁️ 多云</option>
              <option value="rainy">🌧️ 下雨</option>
              <option value="snowy">❄️ 下雪</option>
              <option value="windy">💨 有风</option>
              <option value="foggy">🌫️ 有雾</option>
            </select>
          </div>
        </div>

        <!-- 富文本编辑器 -->
        <div class="editor-section">
          <div class="editor-toolbar">
            <div class="toolbar-group">
              <button
                :class="{ active: editorState.bold }"
                class="toolbar-btn"
                title="加粗"
                @click="toggleBold"
              >
                <svg fill="none" viewBox="0 0 24 24">
                  <path d="M6 4h8a4 4 0 0 1 4 4 4 4 0 0 1-4 4H6z" stroke="currentColor" stroke-width="2"/>
                  <path d="M6 12h9a4 4 0 0 1 4 4 4 4 0 0 1-4 4H6z" stroke="currentColor" stroke-width="2"/>
                </svg>
              </button>

              <button
                :class="{ active: editorState.italic }"
                class="toolbar-btn"
                title="斜体"
                @click="toggleItalic"
              >
                <svg fill="none" viewBox="0 0 24 24">
                  <line stroke="currentColor" stroke-width="2" x1="19" x2="10" y1="4" y2="4"/>
                  <line stroke="currentColor" stroke-width="2" x1="14" x2="5" y1="20" y2="20"/>
                  <line stroke="currentColor" stroke-width="2" x1="15" x2="9" y1="4" y2="20"/>
                </svg>
              </button>

              <button
                :class="{ active: editorState.underline }"
                class="toolbar-btn"
                title="下划线"
                @click="toggleUnderline"
              >
                <svg fill="none" viewBox="0 0 24 24">
                  <path d="M6 3v7a6 6 0 0 0 6 6 6 6 0 0 0 6-6V3" stroke="currentColor" stroke-width="2"/>
                  <line stroke="currentColor" stroke-width="2" x1="4" x2="20" y1="21" y2="21"/>
                </svg>
              </button>

              <button
                class="toolbar-btn"
                title="插入链接"
                @click="insertLink"
              >
                <svg fill="none" viewBox="0 0 24 24">
                  <path d="M10 13a5 5 0 0 0 7.54.54l3-3a5 5 0 0 0-7.07-7.07l-1.72 1.71" stroke="currentColor" stroke-width="2"/>
                  <path d="M14 11a5 5 0 0 0-7.54-.54l-3 3a5 5 0 0 0 7.07 7.07l1.71-1.71" stroke="currentColor" stroke-width="2"/>
                </svg>
              </button>
            </div>

            <div class="toolbar-divider"></div>

            <div class="toolbar-group">
              <select class="toolbar-select" title="标题级别" @change="changeHeading">
                <option value="">正文</option>
                <option value="h1">标题 1</option>
                <option value="h2">标题 2</option>
                <option value="h3">标题 3</option>
              </select>

              <button
                :class="{ active: editorState.textAlign === 'left' }"
                class="toolbar-btn"
                title="左对齐"
                @click="toggleTextAlign('left')"
              >
                <svg fill="none" viewBox="0 0 24 24">
                  <line stroke="currentColor" stroke-width="2" x1="17" x2="3" y1="10" y2="10"/>
                  <line stroke="currentColor" stroke-width="2" x1="21" x2="3" y1="6" y2="6"/>
                  <line stroke="currentColor" stroke-width="2" x1="13" x2="3" y1="14" y2="14"/>
                  <line stroke="currentColor" stroke-width="2" x1="17" x2="3" y1="18" y2="18"/>
                </svg>
              </button>

              <button
                :class="{ active: editorState.textAlign === 'center' }"
                class="toolbar-btn"
                title="居中对齐"
                @click="toggleTextAlign('center')"
              >
                <svg fill="none" viewBox="0 0 24 24">
                  <line stroke="currentColor" stroke-width="2" x1="18" x2="6" y1="10" y2="10"/>
                  <line stroke="currentColor" stroke-width="2" x1="21" x2="3" y1="6" y2="6"/>
                  <line stroke="currentColor" stroke-width="2" x1="16" x2="8" y1="14" y2="14"/>
                  <line stroke="currentColor" stroke-width="2" x1="19" x2="5" y1="18" y2="18"/>
                </svg>
              </button>

              <button
                :class="{ active: editorState.textAlign === 'right' }"
                class="toolbar-btn"
                title="右对齐"
                @click="toggleTextAlign('right')"
              >
                <svg fill="none" viewBox="0 0 24 24">
                  <line stroke="currentColor" stroke-width="2" x1="21" x2="7" y1="10" y2="10"/>
                  <line stroke="currentColor" stroke-width="2" x1="21" x2="3" y1="6" y2="6"/>
                  <line stroke="currentColor" stroke-width="2" x1="21" x2="11" y1="14" y2="14"/>
                  <line stroke="currentColor" stroke-width="2" x1="21" x2="7" y1="18" y2="18"/>
                </svg>
              </button>
            </div>

            <div class="toolbar-divider"></div>

            <div class="toolbar-group">
              <button
                class="toolbar-btn"
                title="有序列表"
                @click="insertOrderedList"
              >
                <svg fill="none" viewBox="0 0 24 24">
                  <line stroke="currentColor" stroke-width="2" x1="10" x2="21" y1="6" y2="6"/>
                  <line stroke="currentColor" stroke-width="2" x1="10" x2="21" y1="12" y2="12"/>
                  <line stroke="currentColor" stroke-width="2" x1="10" x2="21" y1="18" y2="18"/>
                  <path d="M4 6h1v4" stroke="currentColor" stroke-width="2"/>
                  <path d="M4 10h2" stroke="currentColor" stroke-width="2"/>
                  <path d="M6 18H4c0-1 2-2 2-3s-1-1.5-1-1.5" stroke="currentColor" stroke-width="2"/>
                </svg>
              </button>

              <button
                class="toolbar-btn"
                title="无序列表"
                @click="insertUnorderedList"
              >
                <svg fill="none" viewBox="0 0 24 24">
                  <line stroke="currentColor" stroke-width="2" x1="9" x2="20" y1="6" y2="6"/>
                  <line stroke="currentColor" stroke-width="2" x1="9" x2="20" y1="12" y2="12"/>
                  <line stroke="currentColor" stroke-width="2" x1="9" x2="20" y1="18" y2="18"/>
                  <line stroke="currentColor" stroke-width="2" x1="5" x2="5" y1="6" y2="6.01"/>
                  <line stroke="currentColor" stroke-width="2" x1="5" x2="5" y1="12" y2="12.01"/>
                  <line stroke="currentColor" stroke-width="2" x1="5" x2="5" y1="18" y2="18.01"/>
                </svg>
              </button>
            </div>

            <div class="toolbar-divider"></div>

            <div class="toolbar-group">
              <div class="toolbar-dropdown">
                <button
                  class="toolbar-btn"
                  title="插入图片"
                  @click="insertImage"
                >
                  <svg fill="none" viewBox="0 0 24 24">
                    <rect height="18" rx="2" ry="2" stroke="currentColor" stroke-width="2" width="18" x="3" y="3"/>
                    <circle cx="8.5" cy="8.5" r="1.5" stroke="currentColor" stroke-width="2"/>
                    <polyline points="21,15 16,10 5,21" stroke="currentColor" stroke-width="2"/>
                  </svg>
                  <svg class="dropdown-arrow" fill="currentColor" viewBox="0 0 16 16">
                    <path d="M7.247 11.14 2.451 5.658C1.885 5.013 2.345 4 3.204 4h9.592a1 1 0 0 1 .753 1.659l-4.796 5.48a1 1 0 0 1-1.506 0z"/>
                  </svg>
                </button>
                <div class="toolbar-dropdown-menu">
                  <button @click="insertImage">从设备选择</button>
                  <button @click="insertImageFromUrl">从链接插入</button>
                </div>
              </div>

              <input
                class="color-picker"
                title="文字颜色"
                type="color"
                @change="changeTextColor"
              />

              <button
                class="toolbar-btn"
                title="插入表情"
                @click="insertEmoji"
              >
                <svg fill="none" viewBox="0 0 24 24">
                  <circle cx="12" cy="12" r="10" stroke="currentColor" stroke-width="2"/>
                  <path d="M8 14s1.5 2 4 2 4-2 4-2" stroke="currentColor" stroke-width="2"/>
                  <line stroke="currentColor" stroke-width="2" x1="9" x2="9.01" y1="9" y2="9"/>
                  <line stroke="currentColor" stroke-width="2" x1="15" x2="15.01" y1="9" y2="9"/>
                </svg>
              </button>
            </div>
          </div>

          <div class="editor-content">
            <div
              ref="editorRef"
              class="content-editor"
              contenteditable
              placeholder="开始记录你的生活故事..."
              @input="handleContentChange"
              @keydown="handleKeydown"
              @paste="handlePaste"
            ></div>

            <div class="editor-stats">
              <div class="word-count">{{ wordCount }} 字</div>
              <div class="reading-time">{{ readingTime }} 分钟阅读</div>
            </div>
          </div>
        </div>

        <!-- 附件区域 -->
        <div v-if="attachments.length > 0 || showAttachments" class="attachments-section">
          <div class="attachments-header">
            <h3 class="attachments-title">
              <svg fill="none" viewBox="0 0 24 24">
                <path d="M21.44 11.05l-9.19 9.19a6 6 0 0 1-8.49-8.49l9.19-9.19a4 4 0 0 1 5.66 5.66l-9.2 9.19a2 2 0 0 1-2.83-2.83l8.49-8.48" stroke="currentColor" stroke-width="2"/>
              </svg>
              附件 ({{ attachments.length }})
            </h3>
            <button class="add-attachment-btn" @click="selectFiles">
              <svg fill="none" viewBox="0 0 24 24">
                <circle cx="12" cy="12" r="10" stroke="currentColor" stroke-width="2"/>
                <line stroke="currentColor" stroke-width="2" x1="12" x2="12" y1="8" y2="16"/>
                <line stroke="currentColor" stroke-width="2" x1="8" x2="16" y1="12" y2="12"/>
              </svg>
              添加附件
            </button>
          </div>

          <div class="attachments-list">
            <div
              v-for="(attachment, index) in attachments"
              :key="index"
              class="attachment-item"
            >
              <div class="attachment-preview">
                <img
                  v-if="attachment.type === 'image'"
                  :alt="attachment.name"
                  :src="attachment.preview"
                />
                <div v-else :class="attachment.type" class="file-icon">
                  <svg v-if="attachment.type === 'video'" fill="none" viewBox="0 0 24 24">
                    <polygon fill="currentColor" points="23,7 16,12 23,17"/>
                    <rect fill="none" height="14" rx="2" ry="2" stroke="currentColor" stroke-width="2" width="15" x="1" y="5"/>
                  </svg>
                  <svg v-else-if="attachment.type === 'audio'" fill="none" viewBox="0 0 24 24">
                    <path d="M9 18V5l12-2v13" stroke="currentColor" stroke-width="2"/>
                    <circle cx="6" cy="18" r="3" stroke="currentColor" stroke-width="2"/>
                    <circle cx="18" cy="16" r="3" stroke="currentColor" stroke-width="2"/>
                  </svg>
                  <svg v-else fill="none" viewBox="0 0 24 24">
                    <path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z" stroke="currentColor" stroke-width="2"/>
                    <polyline points="14,2 14,8 20,8" stroke="currentColor" stroke-width="2"/>
                  </svg>
                </div>
              </div>

              <div class="attachment-info">
                <div class="attachment-name">{{ attachment.name }}</div>
                <div class="attachment-meta">{{ formatFileSize(attachment.size) }}</div>
              </div>

              <button class="remove-attachment" @click="removeAttachment(index)">
                <svg fill="none" viewBox="0 0 24 24">
                  <line stroke="currentColor" stroke-width="2" x1="18" x2="6" y1="6" y2="18"/>
                  <line stroke="currentColor" stroke-width="2" x1="6" x2="18" y1="6" y2="18"/>
                </svg>
              </button>
            </div>
          </div>

          <input
            ref="fileInputRef"
            accept="image/*,video/*,audio/*,.pdf,.doc,.docx"
            class="file-input"
            multiple
            type="file"
            @change="handleFileSelect"
          />
        </div>
      </div>
    </div>

    <!-- 侧边栏设置 -->
    <div :class="{ open: showSettings }" class="settings-sidebar">
      <div class="sidebar-header">
        <h3 class="sidebar-title">日记设置</h3>
        <button class="close-sidebar" @click="showSettings = false">
          <svg fill="none" viewBox="0 0 24 24">
            <line stroke="currentColor" stroke-width="2" x1="18" x2="6" y1="6" y2="18"/>
            <line stroke="currentColor" stroke-width="2" x1="6" x2="18" y1="6" y2="18"/>
          </svg>
        </button>
      </div>

      <div class="sidebar-content">
        <div class="setting-group">
          <label class="setting-label">隐私设置</label>
          <div class="privacy-options">
            <label class="radio-option">
              <input v-model="diaryForm.privacy" type="radio" value="private" />
              <span class="radio-custom"></span>
              <div class="radio-content">
                <span class="radio-title">🔒 私密</span>
                <span class="radio-desc">只有自己可见</span>
              </div>
            </label>
            <label class="radio-option">
              <input v-model="diaryForm.privacy" type="radio" value="family" />
              <span class="radio-custom"></span>
              <div class="radio-content">
                <span class="radio-title">👨‍👩‍👧‍👦 家庭</span>
                <span class="radio-desc">家庭成员可见</span>
              </div>
            </label>
            <label class="radio-option">
              <input v-model="diaryForm.privacy" type="radio" value="public" />
              <span class="radio-custom"></span>
              <div class="radio-content">
                <span class="radio-title">🌍 公开</span>
                <span class="radio-desc">所有人可见</span>
              </div>
            </label>
          </div>
        </div>

        <div class="setting-group">
          <label class="setting-label">标签</label>
          <div class="tags-section">
            <div class="current-tags">
              <span
                v-for="(tag, index) in diaryForm.tags"
                :key="index"
                class="tag-item"
              >
                {{ tag }}
                <button class="remove-tag" @click="removeTag(index)">×</button>
              </span>
            </div>
            <div class="add-tag">
              <input
                v-model="newTag"
                class="tag-input"
                maxlength="20"
                placeholder="添加标签..."
                type="text"
                @keydown.enter="addTag"
                @keydown.comma.prevent="addTag"
              />
              <button class="add-tag-btn" @click="addTag">
                <svg fill="none" viewBox="0 0 24 24">
                  <circle cx="12" cy="12" r="10" stroke="currentColor" stroke-width="2"/>
                  <line stroke="currentColor" stroke-width="2" x1="12" x2="12" y1="8" y2="16"/>
                  <line stroke="currentColor" stroke-width="2" x1="8" x2="16" y1="12" y2="12"/>
                </svg>
              </button>
            </div>
            <div class="suggested-tags">
              <span class="suggested-label">常用标签：</span>
              <button
                v-for="tag in suggestedTags"
                :key="tag"
                class="suggested-tag"
                @click="addSuggestedTag(tag)"
              >
                {{ tag }}
              </button>
            </div>
          </div>
        </div>

        <div class="setting-group">
          <label class="checkbox-setting">
            <input v-model="diaryForm.allowComments" type="checkbox" />
            <span class="checkbox-custom"></span>
            <span class="checkbox-text">允许评论</span>
          </label>

          <label class="checkbox-setting">
            <input v-model="diaryForm.showInTimeline" type="checkbox" />
            <span class="checkbox-custom"></span>
            <span class="checkbox-text">在时间线显示</span>
          </label>
        </div>
      </div>
    </div>

    <!-- 设置按钮 -->
    <button class="settings-toggle" @click="showSettings = !showSettings">
      <svg fill="none" viewBox="0 0 24 24">
        <circle cx="12" cy="12" r="3" stroke="currentColor" stroke-width="2"/>
        <path d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1 0 2.83 2 2 0 0 1-2.83 0l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-2 2 2 2 0 0 1-2-2v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 0 1-2.83 0 2 2 0 0 1 0-2.83l.06-.06a1.65 1.65 0 0 0 .33-1.82 1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1-2-2 2 2 0 0 1 2-2h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 0 1 0-2.83 2 2 0 0 1 2.83 0l.06.06a1.65 1.65 0 0 0 1.82.33H9a1.65 1.65 0 0 0 1 1.51V3a2 2 0 0 1 2-2 2 2 0 0 1 2 2v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 0 1 2.83 0 2 2 0 0 1 0 2.83l-.06.06a1.65 1.65 0 0 0-.33 1.82V9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 2 2 2 2 0 0 1-2 2h-.09a1.65 1.65 0 0 0-1.51 1z" stroke="currentColor" stroke-width="2"/>
      </svg>
    </button>

    <!-- 表情选择器 -->
    <div v-if="showEmojiPicker" class="emoji-picker" @click.self="showEmojiPicker = false">
      <div class="emoji-panel">
        <div class="emoji-header">
          <h4>选择表情</h4>
          <button @click="showEmojiPicker = false">×</button>
        </div>
        <div class="emoji-categories">
          <div
            v-for="category in emojiCategories"
            :key="category.name"
            class="emoji-category"
          >
            <h5>{{ category.name }}</h5>
            <div class="emoji-grid">
              <button
                v-for="emoji in category.emojis"
                :key="emoji"
                class="emoji-btn"
                @click="insertEmojiChar(emoji)"
              >
                {{ emoji }}
              </button>
            </div>
          </div>
        </div>
      </div>
    </div>

    <!-- 提示遮罩 -->
    <div v-if="showUnsavedWarning" class="modal-overlay">
      <div class="modal-dialog">
        <div class="modal-header">
          <h3>未保存的更改</h3>
        </div>
        <div class="modal-body">
          <p>您有未保存的更改，确定要离开吗？</p>
        </div>
        <div class="modal-footer">
          <button class="modal-btn secondary" @click="cancelLeave">取消</button>
          <button class="modal-btn primary" @click="confirmLeave">离开</button>
        </div>
      </div>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { ref, computed, onMounted, onUnmounted, nextTick } from 'vue'
import { useRouter } from 'vue-router'
import { Notify } from '@opentiny/vue'

const router = useRouter()

interface DiaryForm {
  title: string
  content: string
  date: string
  mood: string
  weather: string
  privacy: 'private' | 'family' | 'public'
  tags: string[]
  allowComments: boolean
  showInTimeline: boolean
}

interface Attachment {
  name: string
  size: number
  type: string
  preview?: string
  file: File
}

// 响应式数据
const isEditing = ref(false)
const isSaving = ref(false)
const isAutoSaving = ref(false)
const showSettings = ref(false)
const showAttachments = ref(false)
const showEmojiPicker = ref(false)
const showUnsavedWarning = ref(false)

const editorRef = ref<HTMLElement>()
const fileInputRef = ref<HTMLInputElement>()

const diaryForm = ref<DiaryForm>({
  title: '',
  content: '',
  date: new Date().toISOString().split('T')[0],
  mood: '',
  weather: '',
  privacy: 'private',
  tags: [],
  allowComments: true,
  showInTimeline: true
})

const attachments = ref<Attachment[]>([])
const newTag = ref('')
const hasUnsavedChanges = ref(false)
const lastSavedTime = ref<Date | null>(null)
const autoSaveTimer = ref<NodeJS.Timeout | null>(null)

const editorState = ref({
  bold: false,
  italic: false,
  underline: false,
  textAlign: 'left'
})

const suggestedTags = ['生活', '工作', '家庭', '旅行', '美食', '学习', '运动', '感悟']

const emojiCategories = [
  {
    name: '表情',
    emojis: ['😀', '😃', '😄', '😁', '😆', '😅', '😂', '🤣', '😊', '😇', '🙂', '🙃', '😉', '😌', '😍', '🥰', '😘', '😗', '😙', '😚', '😋', '😛', '😝', '😜', '🤪', '🤨', '🧐', '🤓', '😎', '🤩', '🥳']
  },
  {
    name: '手势',
    emojis: ['👍', '👎', '👌', '🤏', '✌️', '🤞', '🤟', '🤘', '🤙', '👈', '👉', '👆', '🖕', '👇', '☝️', '👋', '🤚', '🖐', '✋', '🖖', '👏', '🙌', '🤲', '🤝', '🙏']
  },
  {
    name: '自然',
    emojis: ['🌟', '✨', '🌈', '☀️', '🌤', '⛅', '🌦', '🌧', '⛈', '🌩', '⚡', '🔥', '💧', '❄️', '☃️', '⛄', '🌊', '🌋', '🌌', '🌍', '🌎', '🌏', '🌑', '🌒', '🌓', '🌔', '🌕', '🌖', '🌗', '🌘']
  },
  {
    name: '活动',
    emojis: ['⚽', '🏀', '🏈', '⚾', '🥎', '🏓', '🏸', '🏒', '🏑', '🎯', '🎣', '🤿', '🎿', '⛷', '🏂', '🏋️', '🤺', '🤼', '🤸', '⛹️', '🏄', '🏊', '🤽', '🚴', '🚵', '🏇', '🏆', '🥇', '🥈', '🥉']
  },
  {
    name: '物品',
    emojis: ['❤️', '🧡', '💛', '💚', '💙', '💜', '🖤', '🤍', '🤎', '💔', '❣️', '💕', '💞', '💓', '💗', '💖', '💘', '💝', '💟', '☮️', '✝️', '☪️', '🕉', '☸️', '✡️', '🔯', '🕎', '☯️', '☦️', '🛐']
  }
]

// 计算属性
const isFormValid = computed(() => {
  return diaryForm.value.title.trim() !== '' &&
         diaryForm.value.content.trim() !== ''
})

const wordCount = computed(() => {
  return diaryForm.value.content.replace(/<[^>]*>/g, '').length
})

const readingTime = computed(() => {
  const words = wordCount.value
  const averageReadingSpeed = 200 // 每分钟200字
  const time = Math.ceil(words / averageReadingSpeed)
  return time || 1
})

const saveStatusText = computed(() => {
  if (isAutoSaving.value) return '保存中...'
  if (lastSavedTime.value) {
    const now = new Date()
    const diff = now.getTime() - lastSavedTime.value.getTime()
    if (diff < 60000) return '刚刚保存'
    if (diff < 3600000) return `${Math.floor(diff / 60000)}分钟前保存`
    return lastSavedTime.value.toLocaleTimeString()
  }
  return hasUnsavedChanges.value ? '有未保存更改' : '已保存'
})

// 工具函数
const formatFileSize = (bytes: number): string => {
  if (bytes === 0) return '0 B'
  const k = 1024
  const sizes = ['B', 'KB', 'MB', 'GB']
  const i = Math.floor(Math.log(bytes) / Math.log(k))
  return parseFloat((bytes / Math.pow(k, i)).toFixed(2)) + ' ' + sizes[i]
}

const getFileType = (mimeType: string): string => {
  if (mimeType.startsWith('image/')) return 'image'
  if (mimeType.startsWith('video/')) return 'video'
  if (mimeType.startsWith('audio/')) return 'audio'
  return 'document'
}

// 事件处理函数
const handleBack = () => {
  if (hasUnsavedChanges.value) {
    showUnsavedWarning.value = true
  } else {
    router.back()
  }
}

const handleTitleChange = () => {
  hasUnsavedChanges.value = true
  scheduleAutoSave()
}

const handleDateChange = () => {
  hasUnsavedChanges.value = true
}

const handleContentChange = () => {
  if (editorRef.value) {
    diaryForm.value.content = editorRef.value.innerHTML
    hasUnsavedChanges.value = true
    scheduleAutoSave()
  }
}

const handleKeydown = (e: KeyboardEvent) => {
  // Ctrl+S 保存
  if (e.ctrlKey && e.key === 's') {
    e.preventDefault()
    saveDraft()
  }

  // Ctrl+B 加粗
  if (e.ctrlKey && e.key === 'b') {
    e.preventDefault()
    toggleBold()
  }

  // Ctrl+I 斜体
  if (e.ctrlKey && e.key === 'i') {
    e.preventDefault()
    toggleItalic()
  }

  // Ctrl+U 下划线
  if (e.ctrlKey && e.key === 'u') {
    e.preventDefault()
    toggleUnderline()
  }

  // Ctrl+E 居中对齐
  if (e.ctrlKey && e.key === 'e') {
    e.preventDefault()
    toggleTextAlign('center')
  }

  // Ctrl+L 左对齐
  if (e.ctrlKey && e.key === 'l') {
    e.preventDefault()
    toggleTextAlign('left')
  }

  // Ctrl+R 右对齐
  if (e.ctrlKey && e.key === 'r') {
    e.preventDefault()
    toggleTextAlign('right')
  }
}

const handlePaste = async (e: ClipboardEvent) => {
  const items = e.clipboardData?.items
  if (!items) return

  for (const item of items) {
    if (item.type.startsWith('image/')) {
      e.preventDefault()
      const file = item.getAsFile()
      if (file) {
        const attachment: Attachment = {
          name: `粘贴图片_${Date.now()}.${item.type.split('/')[1]}`,
          size: file.size,
          type: getFileType(item.type),
          file
        }

        // 生成预览
        if (attachment.type === 'image') {
          const reader = new FileReader()
          reader.onload = (e) => {
            attachment.preview = e.target?.result as string
          }
          reader.readAsDataURL(file)
        }

        attachments.value.push(attachment)
        showAttachments.value = true
        hasUnsavedChanges.value = true
      }
    }
  }
}

const scheduleAutoSave = () => {
  if (autoSaveTimer.value) {
    clearTimeout(autoSaveTimer.value)
  }

  autoSaveTimer.value = setTimeout(() => {
    if (hasUnsavedChanges.value && isFormValid.value) {
      autoSave()
    }
  }, 3000) // 3秒后自动保存
}

const autoSave = async () => {
  if (isAutoSaving.value || isSaving.value) return

  try {
    isAutoSaving.value = true

    // 模拟自动保存
    await new Promise(resolve => setTimeout(resolve, 1000))

    lastSavedTime.value = new Date()
    hasUnsavedChanges.value = false

  } catch (error) {
    console.error('Auto save failed:', error)
  } finally {
    isAutoSaving.value = false
  }
}

const saveDraft = async () => {
  if (isSaving.value) return

  try {
    isSaving.value = true

    // 模拟保存草稿
    await new Promise(resolve => setTimeout(resolve, 1500))

    lastSavedTime.value = new Date()
    hasUnsavedChanges.value = false

    Notify({
      type: 'success',
      message: '草稿保存成功',
      position: 'top-right'
    })

  } catch (error) {
    console.error('Save draft failed:', error)
    Notify({
      type: 'error',
      message: '保存草稿失败，请重试',
      position: 'top-right'
    })
  } finally {
    isSaving.value = false
  }
}

const publishDiary = async () => {
  if (isSaving.value || !isFormValid.value) return

  try {
    isSaving.value = true

    // 模拟发布日记
    await new Promise(resolve => setTimeout(resolve, 2000))

    Notify({
      type: 'success',
      message: '日记发布成功',
      position: 'top-right'
    })

    // 跳转到日记列表
    router.push('/diary')

  } catch (error) {
    console.error('Publish diary failed:', error)
    Notify({
      type: 'error',
      message: '发布失败，请重试',
      position: 'top-right'
    })
  } finally {
    isSaving.value = false
  }
}

// 富文本编辑器功能
const toggleBold = () => {
  document.execCommand('bold')
  updateEditorState()
}

const toggleItalic = () => {
  document.execCommand('italic')
  updateEditorState()
}

const toggleUnderline = () => {
  document.execCommand('underline')
  updateEditorState()
}

const changeHeading = (e: Event) => {
  const select = e.target as HTMLSelectElement
  const tag = select.value

  if (tag) {
    document.execCommand('formatBlock', false, tag)
  } else {
    document.execCommand('formatBlock', false, 'div')
  }
  updateEditorState()
  handleContentChange()
}

const toggleTextAlign = (align: string) => {
  editorState.value.textAlign = align

  switch (align) {
    case 'left':
      document.execCommand('justifyLeft')
      break
    case 'center':
      document.execCommand('justifyCenter')
      break
    case 'right':
      document.execCommand('justifyRight')
      break
  }

  updateEditorState()
  handleContentChange()
}

const insertLink = () => {
  const url = prompt('请输入链接地址:')
  if (url) {
    document.execCommand('createLink', false, url)
  }
}

const insertOrderedList = () => {
  document.execCommand('insertOrderedList')
}

const insertUnorderedList = () => {
  document.execCommand('insertUnorderedList')
}

const insertImage = () => {
  selectFiles()
}

const insertImageFromUrl = () => {
  const url = prompt('请输入图片链接:')
  if (url) {
    const img = `<img src="${url}" alt="插入的图片" style="max-width: 100%; height: auto; margin: 0.5rem 0;" />`
    document.execCommand('insertHTML', false, img)
    handleContentChange()
  }
}

const changeTextColor = (e: Event) => {
  const input = e.target as HTMLInputElement
  const color = input.value
  document.execCommand('foreColor', false, color)
  handleContentChange()
}

const insertEmoji = () => {
  showEmojiPicker.value = true
}

const insertEmojiChar = (emoji: string) => {
  document.execCommand('insertText', false, emoji)
  showEmojiPicker.value = false
  handleContentChange()
}

const updateEditorState = () => {
  editorState.value.bold = document.queryCommandState('bold')
  editorState.value.italic = document.queryCommandState('italic')
  editorState.value.underline = document.queryCommandState('underline')

  // 检测文本对齐
  if (document.queryCommandState('justifyCenter')) {
    editorState.value.textAlign = 'center'
  } else if (document.queryCommandState('justifyRight')) {
    editorState.value.textAlign = 'right'
  } else {
    editorState.value.textAlign = 'left'
  }
}

// 文件处理
const selectFiles = () => {
  fileInputRef.value?.click()
}

const handleFileSelect = (e: Event) => {
  const input = e.target as HTMLInputElement
  const files = Array.from(input.files || [])

  files.forEach(file => {
    const attachment: Attachment = {
      name: file.name,
      size: file.size,
      type: getFileType(file.type),
      file
    }

    // 生成预览
    if (attachment.type === 'image') {
      const reader = new FileReader()
      reader.onload = (e) => {
        attachment.preview = e.target?.result as string
      }
      reader.readAsDataURL(file)
    }

    attachments.value.push(attachment)
  })

  showAttachments.value = true
  hasUnsavedChanges.value = true
  input.value = ''
}

const removeAttachment = (index: number) => {
  attachments.value.splice(index, 1)
  hasUnsavedChanges.value = true
}

// 标签管理
const addTag = () => {
  const tag = newTag.value.trim()
  if (tag && !diaryForm.value.tags.includes(tag)) {
    diaryForm.value.tags.push(tag)
    newTag.value = ''
    hasUnsavedChanges.value = true
  }
}

const addSuggestedTag = (tag: string) => {
  if (!diaryForm.value.tags.includes(tag)) {
    diaryForm.value.tags.push(tag)
    hasUnsavedChanges.value = true
  }
}

const removeTag = (index: number) => {
  diaryForm.value.tags.splice(index, 1)
  hasUnsavedChanges.value = true
}

// 离开确认
const confirmLeave = () => {
  showUnsavedWarning.value = false
  hasUnsavedChanges.value = false
  router.back()
}

const cancelLeave = () => {
  showUnsavedWarning.value = false
}

// 页面生命周期
onMounted(() => {
  // 初始化编辑器
  nextTick(() => {
    if (editorRef.value) {
      editorRef.value.focus()
    }
  })

  // 监听页面离开
  window.addEventListener('beforeunload', (e) => {
    if (hasUnsavedChanges.value) {
      e.preventDefault()
      e.returnValue = ''
    }
  })
})

onUnmounted(() => {
  if (autoSaveTimer.value) {
    clearTimeout(autoSaveTimer.value)
  }
})
</script>

<style lang="scss" scoped>
.diary-write-view {
  background: #f8fafc;
  min-height: 100vh;
  position: relative;

  .page-header {
    background: white;
    border-bottom: 1px solid #e5e7eb;
    position: sticky;
    top: 0;
    z-index: 10;

    .header-content {
      max-width: 1200px;
      margin: 0 auto;
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 1rem 2rem;

      .header-left {
        display: flex;
        align-items: center;
        gap: 1.5rem;

        .back-btn {
          display: flex;
          align-items: center;
          gap: 0.5rem;
          padding: 0.5rem 1rem;
          background: #f3f4f6;
          border: none;
          border-radius: 8px;
          color: #6b7280;
          cursor: pointer;
          transition: all 0.2s ease;

          &:hover {
            background: #e5e7eb;
            color: #374151;
          }

          svg {
            width: 16px;
            height: 16px;
          }
        }

        .header-text {
          .page-title {
            font-size: 1.5rem;
            font-weight: 600;
            color: #1e293b;
            margin: 0 0 0.25rem 0;
          }

          .page-subtitle {
            color: #64748b;
            margin: 0;
            font-size: 0.9rem;
          }
        }
      }

      .header-actions {
        display: flex;
        align-items: center;
        gap: 1rem;

        .auto-save-status {
          display: flex;
          align-items: center;
          gap: 0.5rem;
          padding: 0.5rem 1rem;
          background: #f9fafb;
          border-radius: 8px;
          color: #6b7280;
          font-size: 0.85rem;

          &.active {
            background: #fef3c7;
            color: #92400e;
          }

          .save-icon {
            width: 14px;
            height: 14px;
          }
        }

        .action-btn {
          display: flex;
          align-items: center;
          gap: 0.5rem;
          padding: 0.75rem 1.5rem;
          border-radius: 8px;
          border: none;
          font-weight: 500;
          cursor: pointer;
          transition: all 0.2s ease;

          svg {
            width: 16px;
            height: 16px;
          }

          &.draft {
            background: #f3f4f6;
            color: #374151;

            &:hover {
              background: #e5e7eb;
            }
          }

          &.publish {
            background: #3b82f6;
            color: white;

            &:hover:not(:disabled) {
              background: #2563eb;
            }

            &:disabled {
              opacity: 0.6;
              cursor: not-allowed;
            }
          }

          .loading-spinner {
            animation: spin 1s linear infinite;
          }
        }
      }
    }
  }

  .writing-section {
    max-width: 1200px;
    margin: 0 auto;
    padding: 2rem;

    .writing-container {
      background: white;
      border-radius: 12px;
      box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
      overflow: hidden;
    }
  }

  .title-section {
    position: relative;
    border-bottom: 1px solid #f1f5f9;

    .title-input {
      width: 100%;
      padding: 2rem 2rem 1rem;
      border: none;
      font-size: 1.75rem;
      font-weight: 600;
      color: #1e293b;
      background: transparent;

      &:focus {
        outline: none;
      }

      &::placeholder {
        color: #94a3b8;
      }
    }

    .title-counter {
      position: absolute;
      bottom: 0.5rem;
      right: 1rem;
      font-size: 0.75rem;
      color: #9ca3af;
    }
  }

  .meta-section {
    display: flex;
    gap: 2rem;
    padding: 1.5rem 2rem;
    border-bottom: 1px solid #f1f5f9;

    .meta-item {
      display: flex;
      align-items: center;
      gap: 0.75rem;

      .meta-label {
        font-size: 0.9rem;
        color: #6b7280;
        font-weight: 500;
        min-width: 50px;
      }

      .meta-input,
      .meta-select {
        padding: 0.5rem 0.75rem;
        border: 1px solid #d1d5db;
        border-radius: 6px;
        font-size: 0.9rem;
        background: white;

        &:focus {
          outline: none;
          border-color: #3b82f6;
          box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
        }
      }
    }
  }

  .editor-section {
    .editor-toolbar {
      display: flex;
      align-items: center;
      gap: 1rem;
      padding: 1rem 2rem;
      border-bottom: 1px solid #f1f5f9;
      background: #f8fafc;

      .toolbar-group {
        display: flex;
        gap: 0.25rem;

        .toolbar-btn {
          width: 36px;
          height: 36px;
          border: none;
          background: transparent;
          border-radius: 6px;
          cursor: pointer;
          display: flex;
          align-items: center;
          justify-content: center;
          color: #6b7280;
          transition: all 0.2s ease;

          &:hover {
            background: rgba(59, 130, 246, 0.1);
            color: #3b82f6;
          }

          &.active {
            background: #3b82f6;
            color: white;
          }

          svg {
            width: 16px;
            height: 16px;
          }
        }

        .toolbar-select {
          padding: 0.5rem;
          border: 1px solid #e5e7eb;
          border-radius: 6px;
          background: white;
          color: #6b7280;
          font-size: 0.85rem;
          cursor: pointer;
          transition: all 0.2s ease;

          &:focus {
            outline: none;
            border-color: #3b82f6;
            box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
          }

          &:hover {
            border-color: #3b82f6;
          }
        }

        .toolbar-dropdown {
          position: relative;

          .toolbar-btn {
            display: flex;
            align-items: center;
            gap: 0.25rem;
            width: auto;
            padding: 0 0.5rem;

            .dropdown-arrow {
              width: 10px;
              height: 10px;
              margin-left: 0.25rem;
            }
          }

          .toolbar-dropdown-menu {
            position: absolute;
            top: 100%;
            left: 0;
            background: white;
            border: 1px solid #e5e7eb;
            border-radius: 6px;
            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
            z-index: 10;
            display: none;
            min-width: 150px;

            button {
              display: block;
              width: 100%;
              padding: 0.5rem 0.75rem;
              border: none;
              background: none;
              text-align: left;
              color: #374151;
              font-size: 0.85rem;
              cursor: pointer;
              transition: background 0.2s ease;

              &:hover {
                background: #f3f4f6;
              }

              &:first-child {
                border-radius: 6px 6px 0 0;
              }

              &:last-child {
                border-radius: 0 0 6px 6px;
              }
            }
          }

          &:hover .toolbar-dropdown-menu {
            display: block;
          }
        }

        .color-picker {
          width: 36px;
          height: 36px;
          border: 1px solid #e5e7eb;
          border-radius: 6px;
          background: none;
          cursor: pointer;
          padding: 0;

          &::-webkit-color-swatch-wrapper {
            padding: 0;
          }

          &::-webkit-color-swatch {
            border: none;
            border-radius: 4px;
          }
        }
      }

      .toolbar-divider {
        width: 1px;
        height: 20px;
        background: #e5e7eb;
      }
    }

    .editor-content {
      position: relative;
      min-height: 400px;

      .content-editor {
        padding: 2rem;
        min-height: 400px;
        font-size: 1rem;
        line-height: 1.6;
        color: #374151;

        &:focus {
          outline: none;
        }

        &[contenteditable]:empty::before {
          content: attr(placeholder);
          color: #9ca3af;
          pointer-events: none;
        }
      }

      .editor-stats {
        position: absolute;
        bottom: 1rem;
        right: 2rem;
        display: flex;
        gap: 1rem;
        font-size: 0.8rem;
        color: #9ca3af;

        .word-count,
        .reading-time {
          padding: 0.25rem 0.5rem;
          background: rgba(255, 255, 255, 0.8);
          border-radius: 4px;
          border: 1px solid #e5e7eb;
        }
      }
    }
  }

  .attachments-section {
    border-top: 1px solid #f1f5f9;
    padding: 1.5rem 2rem;

    .attachments-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 1rem;

      .attachments-title {
        display: flex;
        align-items: center;
        gap: 0.5rem;
        font-size: 1rem;
        font-weight: 600;
        color: #374151;
        margin: 0;

        svg {
          width: 16px;
          height: 16px;
          color: #6b7280;
        }
      }

      .add-attachment-btn {
        display: flex;
        align-items: center;
        gap: 0.5rem;
        padding: 0.5rem 1rem;
        background: #3b82f6;
        color: white;
        border: none;
        border-radius: 6px;
        cursor: pointer;
        transition: background 0.2s ease;

        &:hover {
          background: #2563eb;
        }

        svg {
          width: 14px;
          height: 14px;
        }
      }
    }

    .attachments-list {
      display: flex;
      flex-wrap: wrap;
      gap: 1rem;

      .attachment-item {
        display: flex;
        align-items: center;
        gap: 0.75rem;
        padding: 0.75rem;
        border: 1px solid #e5e7eb;
        border-radius: 8px;
        background: #f9fafb;

        .attachment-preview {
          width: 40px;
          height: 40px;
          border-radius: 6px;
          overflow: hidden;
          flex-shrink: 0;

          img {
            width: 100%;
            height: 100%;
            object-fit: cover;
          }

          .file-icon {
            width: 100%;
            height: 100%;
            display: flex;
            align-items: center;
            justify-content: center;
            background: #e5e7eb;
            color: #6b7280;

            &.video { background: #fecaca; color: #dc2626; }
            &.audio { background: #ddd6fe; color: #7c3aed; }
            &.document { background: #e5e7eb; color: #6b7280; }

            svg {
              width: 20px;
              height: 20px;
            }
          }
        }

        .attachment-info {
          .attachment-name {
            font-size: 0.9rem;
            font-weight: 500;
            color: #374151;
          }

          .attachment-meta {
            font-size: 0.8rem;
            color: #6b7280;
          }
        }

        .remove-attachment {
          background: none;
          border: none;
          color: #ef4444;
          cursor: pointer;
          padding: 0.25rem;
          border-radius: 4px;
          transition: background 0.2s ease;

          &:hover {
            background: rgba(239, 68, 68, 0.1);
          }

          svg {
            width: 16px;
            height: 16px;
          }
        }
      }
    }

    .file-input {
      display: none;
    }
  }

  .settings-sidebar {
    position: fixed;
    top: 0;
    right: 0;
    width: 350px;
    height: 100vh;
    background: white;
    box-shadow: -4px 0 15px rgba(0, 0, 0, 0.1);
    transform: translateX(100%);
    transition: transform 0.3s ease;
    z-index: 20;
    overflow-y: auto;

    &.open {
      transform: translateX(0);
    }

    .sidebar-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 1.5rem;
      border-bottom: 1px solid #e5e7eb;

      .sidebar-title {
        font-size: 1.1rem;
        font-weight: 600;
        color: #1e293b;
        margin: 0;
      }

      .close-sidebar {
        background: none;
        border: none;
        color: #6b7280;
        cursor: pointer;
        padding: 0.25rem;

        svg {
          width: 20px;
          height: 20px;
        }
      }
    }

    .sidebar-content {
      padding: 1.5rem;

      .setting-group {
        margin-bottom: 2rem;

        .setting-label {
          display: block;
          font-size: 0.9rem;
          font-weight: 600;
          color: #374151;
          margin-bottom: 1rem;
        }

        .privacy-options {
          display: flex;
          flex-direction: column;
          gap: 0.75rem;

          .radio-option {
            display: flex;
            align-items: center;
            gap: 0.75rem;
            padding: 0.75rem;
            border: 2px solid #e5e7eb;
            border-radius: 8px;
            cursor: pointer;
            transition: border-color 0.2s ease;

            &:hover {
              border-color: #cbd5e1;
            }

            input[type="radio"] {
              display: none;
            }

            .radio-custom {
              width: 18px;
              height: 18px;
              border: 2px solid #d1d5db;
              border-radius: 50%;
              position: relative;

              &::after {
                content: '';
                position: absolute;
                inset: 3px;
                background: #3b82f6;
                border-radius: 50%;
                opacity: 0;
                transition: opacity 0.2s ease;
              }
            }

            input:checked + .radio-custom {
              border-color: #3b82f6;

              &::after {
                opacity: 1;
              }
            }

            input:checked ~ .radio-content {
              color: #3b82f6;
            }

            .radio-content {
              .radio-title {
                display: block;
                font-weight: 500;
                margin-bottom: 0.25rem;
              }

              .radio-desc {
                font-size: 0.8rem;
                color: #6b7280;
              }
            }
          }
        }

        .tags-section {
          .current-tags {
            display: flex;
            flex-wrap: wrap;
            gap: 0.5rem;
            margin-bottom: 1rem;

            .tag-item {
              display: flex;
              align-items: center;
              gap: 0.5rem;
              padding: 0.25rem 0.75rem;
              background: #e0e7ff;
              color: #3730a3;
              border-radius: 15px;
              font-size: 0.85rem;

              .remove-tag {
                background: none;
                border: none;
                color: #6366f1;
                cursor: pointer;
                font-weight: bold;
                padding: 0;
                margin-left: 0.25rem;
              }
            }
          }

          .add-tag {
            display: flex;
            gap: 0.5rem;
            margin-bottom: 1rem;

            .tag-input {
              flex: 1;
              padding: 0.5rem;
              border: 1px solid #d1d5db;
              border-radius: 6px;
              font-size: 0.9rem;

              &:focus {
                outline: none;
                border-color: #3b82f6;
              }
            }

            .add-tag-btn {
              padding: 0.5rem;
              background: #3b82f6;
              color: white;
              border: none;
              border-radius: 6px;
              cursor: pointer;

              svg {
                width: 14px;
                height: 14px;
              }
            }
          }

          .suggested-tags {
            .suggested-label {
              display: block;
              font-size: 0.8rem;
              color: #6b7280;
              margin-bottom: 0.5rem;
            }

            .suggested-tag {
              margin: 0 0.5rem 0.5rem 0;
              padding: 0.25rem 0.75rem;
              background: #f3f4f6;
              color: #6b7280;
              border: none;
              border-radius: 15px;
              font-size: 0.8rem;
              cursor: pointer;
              transition: background 0.2s ease;

              &:hover {
                background: #e5e7eb;
                color: #374151;
              }
            }
          }
        }

        .checkbox-setting {
          display: flex;
          align-items: center;
          gap: 0.75rem;
          margin-bottom: 0.75rem;
          cursor: pointer;

          input[type="checkbox"] {
            display: none;
          }

          .checkbox-custom {
            width: 18px;
            height: 18px;
            border: 2px solid #d1d5db;
            border-radius: 4px;
            position: relative;

            &::after {
              content: '✓';
              position: absolute;
              inset: 0;
              display: flex;
              align-items: center;
              justify-content: center;
              color: white;
              font-size: 12px;
              font-weight: bold;
              opacity: 0;
              transition: opacity 0.2s ease;
            }
          }

          input:checked + .checkbox-custom {
            background: #3b82f6;
            border-color: #3b82f6;

            &::after {
              opacity: 1;
            }
          }

          .checkbox-text {
            font-size: 0.9rem;
            color: #374151;
          }
        }
      }
    }
  }

  .settings-toggle {
    position: fixed;
    top: 50%;
    right: 1rem;
    transform: translateY(-50%);
    width: 48px;
    height: 48px;
    background: #3b82f6;
    color: white;
    border: none;
    border-radius: 50%;
    cursor: pointer;
    box-shadow: 0 4px 12px rgba(59, 130, 246, 0.3);
    transition: all 0.2s ease;
    z-index: 15;

    &:hover {
      transform: translateY(-50%) scale(1.1);
    }

    svg {
      width: 20px;
      height: 20px;
    }
  }

  .emoji-picker {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 30;

    .emoji-panel {
      background: white;
      border-radius: 12px;
      padding: 1.5rem;
      max-width: 400px;
      max-height: 500px;
      overflow-y: auto;

      .emoji-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 1rem;

        h4 {
          margin: 0;
          color: #1e293b;
        }

        button {
          background: none;
          border: none;
          font-size: 1.5rem;
          cursor: pointer;
          color: #6b7280;
        }
      }

      .emoji-categories {
        .emoji-category {
          margin-bottom: 1.5rem;

          h5 {
            margin: 0 0 0.75rem 0;
            color: #6b7280;
            font-size: 0.9rem;
          }

          .emoji-grid {
            display: grid;
            grid-template-columns: repeat(8, 1fr);
            gap: 0.5rem;

            .emoji-btn {
              width: 40px;
              height: 40px;
              background: none;
              border: none;
              border-radius: 6px;
              cursor: pointer;
              font-size: 1.5rem;
              transition: background 0.2s ease;

              &:hover {
                background: #f3f4f6;
              }
            }
          }
        }
      }
    }
  }

  .modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 40;

    .modal-dialog {
      background: white;
      border-radius: 12px;
      min-width: 400px;
      max-width: 90vw;

      .modal-header {
        padding: 1.5rem 1.5rem 1rem;

        h3 {
          margin: 0;
          color: #1e293b;
        }
      }

      .modal-body {
        padding: 0 1.5rem 1rem;

        p {
          margin: 0;
          color: #6b7280;
        }
      }

      .modal-footer {
        display: flex;
        justify-content: flex-end;
        gap: 0.75rem;
        padding: 1rem 1.5rem 1.5rem;

        .modal-btn {
          padding: 0.5rem 1rem;
          border-radius: 6px;
          border: none;
          cursor: pointer;
          transition: background 0.2s ease;

          &.secondary {
            background: #f3f4f6;
            color: #374151;

            &:hover {
              background: #e5e7eb;
            }
          }

          &.primary {
            background: #ef4444;
            color: white;

            &:hover {
              background: #dc2626;
            }
          }
        }
      }
    }
  }
}

@keyframes spin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

// 响应式设计
@media (max-width: 1024px) {
  .diary-write-view {
    .writing-section {
      padding: 1.5rem;
    }

    .editor-section .editor-toolbar {
      flex-wrap: wrap;
      gap: 0.5rem;

      .toolbar-group {
        flex-wrap: wrap;
      }

      .toolbar-select {
        font-size: 0.8rem;
        padding: 0.4rem;
      }
    }
  }
}

@media (max-width: 768px) {
  .diary-write-view {
    .page-header .header-content {
      flex-direction: column;
      gap: 1rem;
      text-align: center;
      padding: 1rem 1.5rem;

      .header-left {
        flex-direction: column;
        gap: 0.75rem;

        .back-btn {
          padding: 0.4rem 0.8rem;
          font-size: 0.9rem;

          svg {
            width: 14px;
            height: 14px;
          }
        }

        .header-text {
          .page-title {
            font-size: 1.25rem;
          }

          .page-subtitle {
            font-size: 0.85rem;
          }
        }
      }

      .header-actions {
        flex-wrap: wrap;
        justify-content: center;
        gap: 0.75rem;

        .auto-save-status {
          padding: 0.4rem 0.8rem;
          font-size: 0.8rem;

          .save-icon {
            width: 12px;
            height: 12px;
          }
        }

        .action-btn {
          padding: 0.6rem 1.25rem;
          font-size: 0.9rem;

          svg {
            width: 14px;
            height: 14px;
          }
        }
      }
    }

    .writing-section {
      padding: 1rem;
    }

    .title-section {
      .title-input {
        font-size: 1.5rem;
        padding: 1.5rem 1.5rem 0.75rem;
      }

      .title-counter {
        font-size: 0.7rem;
        bottom: 0.4rem;
        right: 0.75rem;
      }
    }

    .meta-section {
      flex-direction: column;
      gap: 1rem;
      padding: 1.25rem 1.5rem;

      .meta-item {
        gap: 0.5rem;

        .meta-label {
          min-width: 45px;
          font-size: 0.85rem;
        }

        .meta-input,
        .meta-select {
          padding: 0.4rem 0.6rem;
          font-size: 0.85rem;
        }
      }
    }

    .editor-section {
      .editor-toolbar {
        flex-direction: column;
        align-items: stretch;
        gap: 0.75rem;
        padding: 1rem 1.5rem;

        .toolbar-group {
          justify-content: center;
          flex-wrap: wrap;
          gap: 0.5rem;

          .toolbar-btn {
            width: 32px;
            height: 32px;

            svg {
              width: 14px;
              height: 14px;
            }
          }

          .toolbar-select {
            flex: 1;
            min-width: 120px;
            max-width: 200px;
          }

          .color-picker {
            width: 32px;
            height: 32px;
          }

          .toolbar-dropdown {
            .toolbar-btn {
              width: auto;
              padding: 0 0.4rem;
              font-size: 0.8rem;
            }
          }
        }

        .toolbar-divider {
          display: none;
        }
      }

      .editor-content {
        min-height: 300px;

        .content-editor {
          padding: 1.5rem;
          min-height: 300px;
          font-size: 0.95rem;
        }

        .editor-stats {
          bottom: 0.75rem;
          right: 1.5rem;
          flex-direction: column;
          gap: 0.5rem;
          font-size: 0.75rem;

          .word-count,
          .reading-time {
            padding: 0.2rem 0.4rem;
            font-size: 0.7rem;
          }
        }
      }
    }

    .settings-sidebar {
      width: 100%;

      .sidebar-content {
        padding: 1.25rem;

        .setting-group {
          margin-bottom: 1.5rem;

          .setting-label {
            font-size: 0.85rem;
            margin-bottom: 0.75rem;
          }

          .privacy-options .radio-option {
            padding: 0.6rem;

            .radio-content {
              .radio-title {
                font-size: 0.9rem;
              }

              .radio-desc {
                font-size: 0.75rem;
              }
            }
          }

          .tags-section {
            .current-tags .tag-item {
              font-size: 0.8rem;
              padding: 0.2rem 0.6rem;
            }

            .add-tag {
              .tag-input {
                font-size: 0.85rem;
                padding: 0.4rem;
              }

              .add-tag-btn {
                padding: 0.4rem;

                svg {
                  width: 12px;
                  height: 12px;
                }
              }
            }

            .suggested-tags {
              .suggested-label {
                font-size: 0.75rem;
              }

              .suggested-tag {
                font-size: 0.75rem;
                padding: 0.2rem 0.6rem;
              }
            }
          }

          .checkbox-setting {
            margin-bottom: 0.6rem;

            .checkbox-text {
              font-size: 0.85rem;
            }
          }
        }
      }
    }

    .settings-toggle {
      right: 0.75rem;
      width: 44px;
      height: 44px;

      svg {
        width: 18px;
        height: 18px;
      }
    }

    .emoji-picker .emoji-panel {
      margin: 0.5rem;
      padding: 1.25rem;
      max-width: calc(100vw - 1rem);
      max-height: calc(100vh - 2rem);

      .emoji-header {
        margin-bottom: 0.75rem;

        h4 {
          font-size: 1rem;
        }

        button {
          font-size: 1.25rem;
        }
      }

      .emoji-categories .emoji-category {
        margin-bottom: 1.25rem;

        h5 {
          font-size: 0.85rem;
          margin-bottom: 0.6rem;
        }

        .emoji-grid {
          grid-template-columns: repeat(6, 1fr);
          gap: 0.4rem;

          .emoji-btn {
            width: 36px;
            height: 36px;
            font-size: 1.25rem;
          }
        }
      }
    }
  }
}

@media (max-width: 480px) {
  .diary-write-view {
    .page-header .header-content {
      padding: 0.75rem 1rem;

      .header-left {
        gap: 0.5rem;

        .back-btn {
          padding: 0.35rem 0.7rem;
          font-size: 0.85rem;

          svg {
            width: 12px;
            height: 12px;
          }
        }

        .header-text {
          .page-title {
            font-size: 1.1rem;
          }

          .page-subtitle {
            font-size: 0.8rem;
          }
        }
      }

      .header-actions {
        gap: 0.5rem;

        .auto-save-status {
          padding: 0.3rem 0.6rem;
          font-size: 0.75rem;

          .save-icon {
            width: 10px;
            height: 10px;
          }
        }

        .action-btn {
          padding: 0.5rem 1rem;
          font-size: 0.85rem;

          svg {
            width: 12px;
            height: 12px;
          }
        }
      }
    }

    .writing-section {
      padding: 0.75rem;
    }

    .title-section {
      .title-input {
        font-size: 1.35rem;
        padding: 1.25rem 1.25rem 0.6rem;
      }

      .title-counter {
        font-size: 0.65rem;
        bottom: 0.3rem;
        right: 0.6rem;
      }
    }

    .meta-section {
      padding: 1rem 1.25rem;
      gap: 0.75rem;

      .meta-item {
        .meta-label {
          min-width: 40px;
          font-size: 0.8rem;
        }

        .meta-input,
        .meta-select {
          padding: 0.35rem 0.5rem;
          font-size: 0.8rem;
        }
      }
    }

    .editor-section {
      .editor-toolbar {
        padding: 0.75rem 1.25rem;
        gap: 0.6rem;

        .toolbar-group {
          gap: 0.4rem;

          .toolbar-btn {
            width: 28px;
            height: 28px;

            svg {
              width: 12px;
              height: 12px;
            }
          }

          .toolbar-select {
            font-size: 0.75rem;
            padding: 0.3rem;
            min-width: 100px;
          }

          .color-picker {
            width: 28px;
            height: 28px;
          }

          .toolbar-dropdown {
            .toolbar-btn {
              padding: 0 0.3rem;
              font-size: 0.75rem;
            }

            .toolbar-dropdown-menu {
              min-width: 130px;

              button {
                padding: 0.4rem 0.6rem;
                font-size: 0.8rem;
              }
            }
          }
        }
      }

      .editor-content {
        min-height: 250px;

        .content-editor {
          padding: 1.25rem;
          min-height: 250px;
          font-size: 0.9rem;
          line-height: 1.5;
        }

        .editor-stats {
          bottom: 0.6rem;
          right: 1.25rem;
          gap: 0.4rem;
          font-size: 0.7rem;

          .word-count,
          .reading-time {
            padding: 0.15rem 0.3rem;
            font-size: 0.65rem;
          }
        }
      }
    }

    .attachments-section {
      padding: 1rem 1.25rem;

      .attachments-header {
        margin-bottom: 0.75rem;

        .attachments-title {
          font-size: 0.9rem;

          svg {
            width: 14px;
            height: 14px;
          }
        }

        .add-attachment-btn {
          padding: 0.4rem 0.8rem;
          font-size: 0.85rem;

          svg {
            width: 12px;
            height: 12px;
          }
        }
      }

      .attachments-list {
        gap: 0.75rem;

        .attachment-item {
          padding: 0.6rem;

          .attachment-preview {
            width: 35px;
            height: 35px;

            .file-icon svg {
              width: 16px;
              height: 16px;
            }
          }

          .attachment-info {
            .attachment-name {
              font-size: 0.85rem;
            }

            .attachment-meta {
              font-size: 0.75rem;
            }
          }

          .remove-attachment {
            padding: 0.2rem;

            svg {
              width: 14px;
              height: 14px;
            }
          }
        }
      }
    }

    .settings-sidebar {
      .sidebar-header {
        padding: 1rem;

        .sidebar-title {
          font-size: 1rem;
        }

        .close-sidebar svg {
          width: 18px;
          height: 18px;
        }
      }

      .sidebar-content {
        padding: 1rem;

        .setting-group {
          margin-bottom: 1.25rem;

          .setting-label {
            font-size: 0.8rem;
            margin-bottom: 0.6rem;
          }
        }
      }
    }

    .settings-toggle {
      right: 0.5rem;
      width: 40px;
      height: 40px;

      svg {
        width: 16px;
        height: 16px;
      }
    }

    .emoji-picker .emoji-panel {
      margin: 0.25rem;
      padding: 1rem;

      .emoji-header {
        margin-bottom: 0.6rem;

        h4 {
          font-size: 0.9rem;
        }

        button {
          font-size: 1.1rem;
        }
      }

      .emoji-categories .emoji-category {
        margin-bottom: 1rem;

        h5 {
          font-size: 0.8rem;
          margin-bottom: 0.5rem;
        }

        .emoji-grid {
          grid-template-columns: repeat(5, 1fr);
          gap: 0.3rem;

          .emoji-btn {
            width: 32px;
            height: 32px;
            font-size: 1.1rem;
          }
        }
      }
    }

    .modal-overlay .modal-dialog {
      margin: 0.25rem;

      .modal-header {
        padding: 1rem 1rem 0.75rem;

        h3 {
          font-size: 1rem;
        }

        .modal-close svg {
          width: 16px;
          height: 16px;
        }
      }

      .modal-body {
        padding: 1rem;

        p {
          font-size: 0.9rem;
        }
      }

      .modal-footer {
        padding: 0.75rem 1rem 1rem;
        gap: 0.5rem;

        .modal-btn {
          padding: 0.5rem 1rem;
          font-size: 0.85rem;
        }
      }
    }
  }
}
</style>
